<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="showQuestionInfo"
          >题目</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-tickets"
          size="mini"
          @click="showHistoryInfo"
          >历史记录</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-s-comment"
          size="mini"
          @click="showCommentsInfo"
          >评论</el-button
        >
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8" v-show="showQuestion">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span
              >{{ question.name }}&nbsp;&nbsp;
              <el-tag
                :type="
                  question.difficulty === 0
                    ? 'warning'
                    : question.difficulty === 1
                    ? 'danger'
                    : 'info'
                "
                effect="dark"
              >
                {{
                  question.difficulty === 0
                    ? "易"
                    : question.difficulty === 1
                    ? "中"
                    : "难"
                }}
              </el-tag>
            </span>
          </div>
          <div class="text item">
            <span>标签:</span>
            <el-tag
              v-for="tag in question.tags.split(',')"
              :key="tag"
              type="info"
              style="margin-right: 5px"
            >
              {{ tag }}
            </el-tag>
          </div>
          <div class="text item">
            <div
              v-if="
                question.type === 0 ||
                question.type === 1 ||
                question.type === 2
              "
            >
              <div style="font-size: 16px; font-weight: bold">题目：</div>
              <br />
              <div style="padding-left: 20px">
                {{ getQuestionText(question.stem) }}
              </div>
              <br />
              <div style="font-size: 16px; font-weight: bold">选项：</div>
              <div
                v-for="(option, index) in getOptions(question.stem)"
                :key="index"
                style="padding-left: 20px"
              >
                {{ option }}
              </div>
            </div>
            <div v-else>
              <div style="font-size: 16px; font-weight: bold">题目：</div>
              <div style="padding-left: 20px" v-html="question.stem"></div>
            </div>
          </div>
          <div>选项：</div>
          <div v-if="[0, 1, 2].includes(question.type)">
            <div
              v-for="(option, index) in getOptions(question.stem)"
              :key="index"
            >
              <template v-if="question.type === 0">
                <input type="radio" v-model="selectedOption" :value="index" />
                <span>{{ option }}</span>
              </template>
              <template v-else-if="question.type === 1">
                <input
                  type="checkbox"
                  v-model="selectedOptions"
                  :value="index"
                />
                <span>{{ option }}</span>
              </template>
              <template v-else>
                <input type="radio" v-model="selectedOption" :value="index" />
                <span>{{ option }}</span>
              </template>
            </div>
          </div>
          <div v-else class="text item">
            <span>答案:</span>
            <editor v-model="answer" :min-height="192" />
          </div>
          <div class="text item">
            <el-button type="primary" @click="submitAnswer">提交</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8" v-show="showComments">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>评论</span>
          </div>
          <div v-html="comments"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8" v-show="showHistory">
      <el-col :span="24">
        <el-table :data="questionHistory" border>
          <el-table-column
            prop="answer"
            label="答案"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="answerScore"
            label="答案分数"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="提交时间"
            width="200"
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Editor from "@/components/Editor";
import { getQuestions } from "@/api/system/questions";
import { addRecord, getRecordByQuestionAndStudent } from "@/api/system/record";
import { getCommentsByQuestionId, addComments } from "@/api/system/comments";

export default {
  components: { Editor },
  data() {
    return {
      question: {},
      questionHistory: [],
      selectedOption: null,
      selectedOptions: [],
      answer: "",
      comments: [],
      showQuestion: true,
      showComments: false,
      showHistory: false,
    };
  },
  created() {
    this.getQuestionInfo();
  },
  methods: {
    getQuestionText(stem) {
      const regex = /[A-Z]\s*\d*/g;
      return stem.replace(regex, "");
    },
    getOptions(stem) {
      const options = [];
      const regex = /[A-Z]\s*\d*/g;
      const matches = stem.match(regex);
      if (matches) {
        matches.forEach((match) => {
          options.push(match.trim());
        });
      }
      return options;
    },
    async getQuestionInfo() {
      try {
        const { data } = await getQuestions(this.$route.query.id);
        this.question = data;
      } catch (error) {
        this.$message.error("找不到信息");
      }
    },
    showQuestionInfo() {
      this.showQuestion = true;
      this.showComments = false;
      this.showHistory = false;
    },
    showHistoryInfo() {
      this.showQuestion = false;
      this.showComments = false;
      this.showHistory = true;
      this.getHistory();
    },
    showCommentsInfo() {
      this.showQuestion = false;
      this.showComments = true;
      this.showHistory = false;
      this.getComments();
    },

    async getComments() {
      const { data } = await getCommentsByQuestionId(this.$route.query.id);
      this.comments = data;
      console.log(data);
    },
    async getHistory() {
      console.log("正在查询");
      const { data } = await getRecordByQuestionAndStudent(
        this.$route.query.id,
        this.$root.$store.state.user.id
      );
      this.questionHistory = data;
      console.log("查询成功");
      console.log(data);
    },
    async submitAnswer() {
      if (
        !this.answer &&
        (!this.selectedOption || !this.selectedOption.trim()) &&
        (!this.selectedOptions || !this.selectedOptions.length)
      ) {
        this.$message.warning("答案不能为空");
        return;
      } else if (
        !this.answer &&
        this.selectedOption &&
        this.selectedOption.trim()
      ) {
        this.answer = String.fromCharCode(65 + this.selectedOption);
      } else if (
        !this.answer &&
        this.selectedOptions &&
        this.selectedOptions.length
      ) {
        this.answer = this.selectedOptions
          .map((i) => String.fromCharCode(65 + i))
          .join(", ");
      }
      console.log(
        this.$root.$store.state.user.id,
        this.$route.query.id,
        this.answer
      );
      const { data } = await addRecord({
        questionId: this.$route.query.id,
        studentId: this.$root.$store.state.user.id,
        answer: this.answer,
      });
      if (
        this.$root.$store.state.user.id &&
        this.$route.query.id &&
        this.answer
      ) {
        this.$message.success("提交成功");
        this.answer = "";
        this.selectedOption = null;
        this.selectedOptions = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  border-bottom: 1px solid #e6ebf5;
}

.item:last-child {
  border-bottom: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  margin-bottom: 20px;
}

.is-checked {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>
